<template>
    <div id="app">
        <div class="position item">
            <div class="place" @click="$router.push('/city')">
                {{cityStore.selectCity.cityName}}
            </div>
            <div class="myposition" @click="positionClick">
                <span>我的位置</span>
                <img src="../../../assets/img/home/icon_location.png" alt="">
            </div>

        </div>
        <div class="timer item" @click="show = true">
            <div>
                <span>入住</span>
                <span>{{nowDay}}</span>
            </div>
            <div>
                <span>共{{diffDay}}晚</span>
            </div>
            <div>
                <span>入住</span>
                <span>{{leaveDay}}</span>
            </div>
        </div>
        <div class="label item">
            <span>价格不限</span>
            <span>人数不限</span>
        </div>
        <div class="label item">
            <span>关键字/位置/民宿</span>
        </div>
        <div class="item hotplaceList">
            <template v-for="(item,i) in hotplace.data" :key="i">
                <div class="item-hotplace" :style="{
                    backgroundColor:item.tagText.background.color,
                    color:item.tagText.color
                    }"
                >
                {{item.tagText.text}}
                </div>
            </template>
        </div>
        <div class="search-btn item" @click="goToSearch">
            开始搜索
        </div>
        <van-calendar :poppable="true" :round="false" v-model:show="show" type="range" @confirm="onConfirm" />
    </div>
</template>

<script setup>
import useCityStore from '@/store/modules/cityStore';
import { getMonthDay } from '@/util/formart_date'
import { daysDifference } from '@/util/formart_date'
import useMainStore from '@/store/modules/mainStore'

import { computed, ref, toRaw } from 'vue';
import { useRouter } from 'vue-router';
import { storeToRefs } from 'pinia';

const cityStore = useCityStore();
const props = defineProps(['hotplace',"hotSuggest"])
const router = useRouter();

const positionClick = () => {
    navigator.geolocation.getCurrentPosition(res => {
        console.log('获取位置成功', res)
    }, (err) => {
        console.log("获取位置失败", err);
    }, {
        timeout: 5000
    })
}

// 获取当前日期

const mainStore = useMainStore()
const { startTime,EndTime } = storeToRefs(mainStore);

const nowDay = computed(()=>getMonthDay(startTime.value))
const leaveDay = computed(()=>getMonthDay(EndTime.value))

// 相差天数
const diffDay = ref(1);

// 日历数据加载
const show = ref(false);
const onConfirm = (data) => {
    startTime.value = data[0]
    EndTime.value = data[1]
    diffDay.value = daysDifference(data[1], data[0]);
    show.value = false
}

// 去搜索
const goToSearch = ()=>{
    router.push({
        path:'/search',
        query:{
            nowDay:nowDay.value,
            leaveDay:leaveDay.value,
            cityName:cityStore.selectCity.cityName
        }
    })
}
</script>


<style lang="less" scoped>
#app{
    --van-calendar-popup-height:100%;
    .item {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 15px 0;
        margin: 0 20px;
        border-bottom: 1px solid rgb(248, 246, 246);
    }
    .position {
        height: 30px;
        .myposition {
            display: flex;
            align-items: center;
            img {
                margin-left: 5px;
                vertical-align: top;
                width: 15px;
                height: 15px;
            }
        }
    }
    .timer {
        div {
            display: flex;
            flex-direction: column;
            span {
                padding: 3px 0;
                &:first-child {
                    font-size: 14px;
                    color: gray;
                }
            }
        }
    }
    .label {
        font-size: 14px;
        color: gray;

    }
    .hotplaceList{
            display: flex;
            flex-wrap: wrap;
            justify-content: flex-start;
            .item-hotplace{
                font-size: 12px;
                margin-right: 10px;
                padding: 5px;
                border-radius: 10px;
                margin-bottom: 10px;
            }
        }
        .search-btn{
            font-size: 17px;
            justify-content: center;
            color: white;
            text-align: right;
            padding: 10px;
            border-radius: 20px;
            background-image: linear-gradient(rgb(255,149,30),rgb(255,178,61));
        }
}
</style>